<template>
  <div>
    <Card>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <Card :bordered="false" dis-hover>
                <p slot="title">基础信息</p>
                <FormItem label="昵称" prop="name">
                  <Input v-model="formValidate.name" placeholder="昵称" />
                </FormItem>
                <FormItem label="头像" prop="avatar">
                  <Upload action="//jsonplaceholder.typicode.com/posts/">
                      <Avatar src="https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png"  size="large"/>
                  </Upload>

                </FormItem>
                <FormItem label="手机号" prop="mail">
                    <Input v-model="formValidate.mail" placeholder="手机号" />
                </FormItem>
                <FormItem label="性别" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="male">男</Radio>
                        <Radio label="female">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="备注" prop="desc">
                    <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注" />
                </FormItem>
          </Card>
          <Card :bordered="false" dis-hover>
                <p slot="title">银行卡信息</p>
                <FormItem label="开户行" prop="name">
                  <Input v-model="formValidate.name" placeholder="开户行" />
                </FormItem>
                <FormItem label="开户联系人" prop="avatar">
                  <Input v-model="formValidate.name" placeholder="开户联系人" />
                </FormItem>
                <FormItem label="卡号" prop="avatar">
                  <Input v-model="formValidate.name" placeholder="卡号" />
                </FormItem>
          </Card>
          <Card :bordered="false" dis-hover>
                <p slot="title">封面信息</p>
                <FormItem label="图片" prop="name">
                  <upload-input />
                </FormItem>
                <FormItem label="视频" prop="avatar">
                  <upload-input />
                </FormItem>
          </Card>

        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>

        </FormItem>
    </Form>
    </Card>
  </div>

</template>
<script>
import uploadInput from '@/components/upload-input'
export default {
  data () {
    return {
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          { required: true, message: 'Please select the city', trigger: 'change' }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
          { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
        ],
        date: [
          { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
        ],
        time: [
          { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
        ],
        desc: [
          { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
          { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    uploadInput
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
